{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
    
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
    <form method="post" class="form-recharge" id="withdrawform">
        <div class="mui-card">
            <ul class="mui-table-view ">
                <li class="mui-table-view-divider">提现金额（账户余额
                    <span class="mui-badge mui-badge-danger size-16">
                    {%if amount %}{{amount|formatCurrencyFour}}{%else%}0.0000{%endif%} 元
                    </span>
                                                              ）
                </li>
                <div class="mui-input-row padding-10">
                    <input type="number" pattern="\d*" placeholder="输入提现金额，单笔最少提现{{withdraw_min_amount}}元" name="withdraw_amount" min="{{withdraw_min_amount}}">
                </div>
                <li class="mui-table-view-divider">提现方式</li>
                {% for val in withdrawlist %}
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon" name="withdrawli" id="{{val.channel}}">
                    <input name="payment"  type="radio"  value="{{val.id}}" {% if val.id== 22 %} checked {% endif%}>
                    <div class="mui-media-object mui-pull-left"><img src="{{val.logo}}"> </span>
                    </div>
                    <div class="mui-media-body">
                        {{val.title}}
                    </div>
                </li>
                {% endfor %}
                <li class="mui-table-view-divider"></li>
                <form class="mui-input-group"  >
                  <div class="mui-input-row" id="realnamediv">
                        <label>真实姓名</label>
                        <input type="text"   class="mui-input-clear" placeholder="输入真实姓名" value="" name="realname"  >
                  </div>
                  <div class="mui-input-row" id="banknodiv">
                        <label>银行卡号</label>
                        <input type="number" pattern="\d*" class="mui-input-clear" placeholder="输入银行卡号" value="" name="bankno"  >
                  </div>
                  <div class="mui-input-row" id="banknamediv" >
                        <label>开户银行</label>
                        <input type="text"   class="mui-input-clear" placeholder="输入开户银行" value="" name="bankname"  >
                  </div>
                  <div class="mui-input-row" id="wxnodiv" style="display:none">
                        <label>微信账号</label>
                        <input type="text"   class="mui-input-clear" placeholder="输入微信账号" value="" name="wxno"  >
                  </div>
                  <div class="mui-input-row" id="alipaynodiv" style="display:none">
                        <label>支付宝账号</label>
                        <input type="text"   class="mui-input-clear" placeholder="输入支付宝账号" value="" name="alipayno"  >
                  </div>
               </form>
            </ul>
            
            </div>
            
        <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
            <input type="hidden" value="{{order.id}}" name="order_id">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="withdraw">提交申请</button>
        </div>
    </form>
</div>

{% endblock%}

{% block script %}
<script>
    var falg = false;
    $("#withdraw").on("tap",function () {
        if(falg){
            return false;
        }
        var amount = "{{amount}}";
        var min_amount = "{{withdraw_min_amount}}";
        
        var withdraw_amount = $("input[name='withdraw_amount']").val();
        
        if(withdraw_amount===''){
            mui.toast("请输入提现金额");
            return;
        }
        if(withdraw_amount===0){
            mui.toast("提现金额必须大于0");
            return;
        }
        console.log('withdraw_amount ---------:'+withdraw_amount);
        console.log('amount ---------:'+amount);
        console.log('withdraw_amount>amount ---------:'+(Number(withdraw_amount)>Number(amount)));
        if(Number(withdraw_amount)>Number(amount)){
    		mui.toast("提现金额大于账户余额");
            return;
    	}
        if(Number(withdraw_amount)<Number(min_amount)){
    		mui.toast("单笔最少提现金额"+min_amount+"元");
            return;
    	}
        
        var checkdobj = $("input[name='payment']:checked");
        var payment = checkdobj.val();
        if(payment===undefined){
            mui.toast("请选择一种提现方式");
            return;
        }
        console.log('payment ---------:'+payment);
        var pay_code = $(checkdobj).parents("li").attr("id");
        console.log('checkdata --------pay_code-:'+pay_code);
        var realname = $("input[name='realname']").val();
    	var bankno = $("input[name='bankno']").val();
    	var bankname = $("input[name='bankname']").val();
    	var wxno = $("input[name='wxno']").val();
    	var alipayno = $("input[name='alipayno']").val();
    	console.log('checkdata --------realname-:'+realname);
    	console.log('checkdata --------bankno-:'+bankno);
    	console.log('checkdata --------bankname-:'+bankname);
    	console.log('checkdata --------wxno-:'+wxno);
    	console.log('checkdata --------alipayno-:'+alipayno);
        if(pay_code==='debit_withdraw'){
            if(realname===''){
                mui.toast("请输入真实姓名");
                return;
            }
            if(bankno===''){
                mui.toast("请输入银行卡号");
                return;
            }
            if(bankname===''){
                mui.toast("请输入开户银行");
                return;
            }
    	}else if(pay_code==='wx_withdraw'){
            if(wxno===''){
                mui.toast("请输入微信账号");
                return;
            }
    	}else if(pay_code==='alipay_withdraw'){
            if(alipayno===''){
                mui.toast("请输入支付宝账号");
                return;
            }
    	}
        
        
        var that = this;
        $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
        falg = true;
        
        mui.post("/center/account/withdraw",
        		{amount:withdraw_amount,
        	     payment:payment,
        	     pay_code:pay_code,
        	     realname:realname,
        	     bankno:bankno,
        	     bankname:bankname,
        	     wxno:wxno,
        	     alipayno:alipayno
        	     },
        	function(data){
        	 if(data.errno == 0){
                    mui.toast(data.data.name);
                    setTimeout(function(){
                             $(that).removeClass('disabled').prop('disabled',false);
                             falg=false;
                             location.href="/center/account";
                    },1500);
              }else {
                    $(that).removeClass('disabled').prop('disabled',false);
                    if(data.errno==1001){
                             $.each(data.errmsg,function(i,n){
                                 mui.toast(n);
                     })
                     }else {
                             mui.toast(data.errmsg);
                    }
             }
        },'json');
        return;
    });
    
    var $subBox = $("li[name='withdrawli']");
    $subBox.on('click',function(){
    	var id = $(this).attr("id");
    	if(id=='debit_withdraw'){
    		$("#realnamediv")[0].style.display = 'block'; 
    		$("#banknodiv")[0].style.display = 'block'; 
    		$("#banknamediv")[0].style.display = 'block'; 
    		$("#wxnodiv")[0].style.display = 'none';
    		$("#alipaynodiv")[0].style.display = 'none';
    		
    	}else if(id=='wx_withdraw'){
    		$("#realnamediv")[0].style.display = 'none'; 
    		$("#banknodiv")[0].style.display = 'none'; 
    		$("#banknamediv")[0].style.display = 'none'; 
    		$("#wxnodiv")[0].style.display = 'block';
    		$("#alipaynodiv")[0].style.display = 'none';
    	}else if(id=='alipay_withdraw'){
    		$("#realnamediv")[0].style.display = 'none'; 
    		$("#banknodiv")[0].style.display = 'none'; 
    		$("#banknamediv")[0].style.display = 'none'; 
    		$("#wxnodiv")[0].style.display = 'none';
    		$("#alipaynodiv")[0].style.display = 'block';
    	}
    });
    
</script>
{% endblock %}
